<template>
    <div class="newsinfo_content1">
        <h1>{{photoinfolist.title}}</h1>
        <p class="p_des">
            <span>发表时间：{{photoinfolist.add_time |timeFil}}</span>
            <span>点击次数：{{photoinfolist.click}}</span>
        </p>
        <hr>
        <!-- 图片缩略组 -->
        <div class="img_arr">
            <vue-preview :slides="slide1" @close="handleClose"></vue-preview>
        </div>
        <div class="content" v-html="photoinfolist.content"></div>

        <comment :id="id"></comment> 
    </div>

    
</template>

<script>
    import {Toast} from 'mint-ui'
    import comment from '../soncomponents/comment.vue'
    export default {
        data () {
            return {
                id:this.$route.params.id,
                photoinfolist:{},
                slide1:[]
            }
        },
        created() {
            this.getphotoinfo();
            this.getimages();

        },
        methods: {
            getphotoinfo(){
                this.$http.get('api/getimageInfo/'+this.id).then(res=>{
                    if(res.body.status==0){
                        console.log(res.body);
                        this.photoinfolist = res.body.message[0]
                    }else{
                        Toast("请求失败")
                    }
                });
            },
            getimages(){
                this.$http.get('api/getthumimages/'+this.id).then(res=>{
                    if(res.body.status==0){
                        console.log(res.body);
                        res.body.message.forEach((ele,i) => {
                            ele.w = 600;
                            ele.h = 400;
                            ele.alt = i;
                            ele.title = i;
                            ele.msrc = ele.src;
                        });
                        this.slide1 = res.body.message
                    }else{
                        Toast("请求失败")
                    }
                });
            },
            handleClose () {
                console.log('close event')
            }
        },
        components: {
            comment
        }
    }
</script>

<style lang="scss">
.newsinfo_content1{
        padding: 5px 10px;
        h1{
            color: #007aff;
            font-size: 16px;
            text-align: center;
        }
        .p_des{
            color: #ccc;
            font-size: 14px;
            display: flex;
            justify-content: space-between;
        }
        .img_arr{
            .my-gallery{
                display: flex;
                text-align: center;
                // justify-content:space-between;
                flex-wrap: wrap;
                width: 100%;
                figure{
                    width: 33.3%;
                    margin: 0;
                    // display: inline-block;
                    // width: 33%;
                    img{
                        width: 100px;
                        height: 100px;
                        // margin-right: 15px;
                        margin-bottom: 5px;
                    }
                }
            }
        }       
    }
</style>